<template>
  <el-dialog
  title="统计"
  width="800px"
  :visible.sync = "showDialog"
  @close="closeModel"
  >
    <div>
      <el-row>
        <li style="font-size: 15px">{{startTime}}至{{endTime}} {{blockName}} {{deviceTypeName}} 设备能耗统计图表</li>
      </el-row>
      <el-row>
        <el-col :span="8" :offset="16">
          <el-radio-group v-model="radio" size="small">
            <el-radio-button label="table">列表显示</el-radio-button>
            <el-radio-button label="chart">图表显示</el-radio-button>
          </el-radio-group>
        </el-col>
      </el-row>

      <div v-show="radio==='chart'">
        <el-row style="padding-bottom: 10px">
          <el-col :span="5">
            <li style="font-size: 10px">最大能耗：{{maxEc}}度</li>
          </el-col>
          <el-col :span="5">
            <li style="font-size: 10px">最小能耗：{{minEc}}度</li>
          </el-col>
          <el-col :span="5">
            <li style="font-size: 10px">平均能耗：{{avgEc}}度</li>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6" :offset="18">
            <el-radio v-model="chartType" label="line">折线</el-radio>
            <el-radio v-model="chartType" label="histogram">柱形</el-radio>
          </el-col>
        </el-row>
          <template>
            <ve-chart :data="chartData1" :settings="chartSettings"></ve-chart>
          </template>
      </div>

      <div class="tabBoxContent" v-show="radio==='table'&&block===''">
        <el-row style="padding-bottom: 10px">
          <el-col :span="5">
            <li style="font-size: 10px">最高能耗：{{maxEc}}度</li>
          </el-col>
          <el-col :span="5">
            <li style="font-size: 10px">最低能耗：{{minEc}}度</li>
          </el-col>
          <el-col :span="5">
            <li style="font-size: 10px">平均能耗：{{avgEc}}度</li>
          </el-col>
        </el-row>
        <el-row>
          <el-table :data="tableData_block" style="width: 100%">
            <el-table-column
              prop="blockName"
              label="区域块名称"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="deviceNum"
              label="区域块内设备数量"
              width="140px"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="Ec"
              label="总能耗"
              align="center"
            >
<!--              <template slot-scope="prop">-->
<!--                <span>{{prop.row.totalEc}}度</span>-->
<!--              </template>-->
            </el-table-column>
            <el-table-column
              label="详情"
              align="center"
            >
              <template slot-scope="props">
                <el-button size="mini" icon="el-icon-s-order" @click="showDeviceDialog(props.row.blockId)"></el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </div>

      <div class="tabBoxContent" v-show="block!==''&&radio==='table'">
        <el-row style="padding-bottom: 10px">
          <el-col :span="5">
            <li style="font-size: 10px">最高能耗：{{maxEc}}度</li>
          </el-col>
          <el-col :span="5">
            <li style="font-size: 10px">最低能耗：{{minEc}}度</li>
          </el-col>
          <el-col :span="5">
            <li style="font-size: 10px">平均能耗：{{avgEc}}度</li>
          </el-col>
        </el-row>
        <el-row>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column
              type="expand"
              label="设备详情"
              align="center"
              width="80px"
            >
              <template slot-scope="props" style="padding:0">
                <el-form
                  label-position="left"
                  inline
                  class="demo-table-expand"
                >
                  <el-form-item label="设备型号:">
                    <span>{{ props.row.model }}</span>
                  </el-form-item>
                  <el-form-item label="IP:">
                    <span>{{ props.row.ip }}</span>
                  </el-form-item>
                  <el-form-item label="端口:">
                    <span>{{ props.row.port }}</span>
                  </el-form-item>
                  <el-form-item label="编号:">
                    <span>{{ props.row.id }}</span>
                  </el-form-item>
                  <el-form-item label="区域:">
                    <span>{{ props.row.location }}</span>
                  </el-form-item>
                  <el-form-item label="使用单位:">
                    <span>{{ props.row.dept }}</span>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
            <el-table-column
              prop="name"
              label="设备名称"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="num"
              label="回路内设备数量"
              width="140px"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="type"
              label="设备类型"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="totalEc"
              label="总能耗"
              align="center"
            >
              <template slot-scope="props">
                <span>{{props.row.totalEc}}度</span>
              </template>
            </el-table-column>
            <el-table-column
              label="图表"
              align="center"
            >
              <template slot-scope="props">
                <el-button size="mini" icon="el-icon-s-data" @click="showDetails(props.row.chartData)"></el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </div>

      <el-dialog
        title="设备列表"
        :visible.sync="showDevices"
        @close="closeDeviceDialog"
        append-to-body
        >
        <el-row style="padding-bottom: 10px">
          <el-col :span="5">
            <li style="font-size: 10px">最高能耗：{{maxEc}}度</li>
          </el-col>
          <el-col :span="5">
            <li style="font-size: 10px">最低能耗：{{minEc}}度</li>
          </el-col>
          <el-col :span="5">
            <li style="font-size: 10px">平均能耗：{{avgEc}}度</li>
          </el-col>
        </el-row>
        <el-row>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column
              type="expand"
              label="设备详情"
              align="center"
              width="80px"
            >
              <template slot-scope="props" style="padding:0">
                <el-form
                  label-position="left"
                  inline
                  class="demo-table-expand"
                >
                  <el-form-item label="设备型号:">
                    <span>{{ props.row.model }}</span>
                  </el-form-item>
                  <el-form-item label="IP:">
                    <span>{{ props.row.ip }}</span>
                  </el-form-item>
                  <el-form-item label="端口:">
                    <span>{{ props.row.port }}</span>
                  </el-form-item>
                  <el-form-item label="编号:">
                    <span>{{ props.row.id }}</span>
                  </el-form-item>
                  <el-form-item label="区域:">
                    <span>{{ props.row.location }}</span>
                  </el-form-item>
                  <el-form-item label="使用单位:">
                    <span>{{ props.row.dept }}</span>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
            <el-table-column
              prop="name"
              label="设备名称"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="num"
              label="回路内设备数量"
              width="140px"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="type"
              label="设备类型"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="totalEc"
              label="总能耗"
              align="center"
            >
              <template slot-scope="props">
                <span>{{props.row.totalEc}}度</span>
              </template>
            </el-table-column>
            <el-table-column
              label="图表"
              align="center"
            >
              <template slot-scope="props">
                <el-button size="mini" icon="el-icon-s-data" @click="showDetails(props.row.chartData)"></el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </el-dialog>

      <el-dialog
        title="设备能耗统计图表"
        :visible.sync="showData"
        @close="closeDetails"
        append-to-body
        >
        <el-row>
          <el-col :span="6" :offset="18">
            <el-radio v-model="chartType" label="line">折线</el-radio>
            <el-radio v-model="chartType" label="histogram">柱形</el-radio>
          </el-col>
        </el-row>
        <template>
          <ve-chart :data="chartData" :settings="chartSettings"></ve-chart>
        </template>
      </el-dialog>
    </div>
  </el-dialog>
</template>

<script>
  import VeChart from 'v-charts/lib/chart'
  import Axios from "axios";

  export default{
    components:{
      VeChart
    },
    props:{
      showDialog:{
        type: Boolean,
        default: false
      },
      block: '',
      blockName: '',
      deviceType: '',
      deviceTypeName: '',
      startTime: '',
      endTime: ''
    },
    data(){
      return{
        radio: 'chart',
        maxEc: '***',
        minEc: '***',
        avgEc: '***',
        chartData: {
          columns: [],
          rows: []
        },
        chartData1: {
          columns: [],
          rows: []
        },
        chartType: 'line',
        chartSettings:{type:'line',yAxisName:['用电量'],xAxisName:['时间轴']},
        tableData: [],
        tableData_block: [],
        showData: false,
        showDevices: false
      }
    },
    methods:{
      closeModel(){
        this.radio = 'chart'
        this.chartType = 'line'
        this.showData = false
        this.chartData = {}
        this.chartData1 = {}
        this.$emit("closeModel")
      },
      showDetails(item){
        this.chartData = item
        this.showData = true
      },
      showDeviceDialog(blockId){
        let self = this
        Axios.get(this.api+'getECOfDevice',{
          params: {
            blockId: blockId,
            startTime: self.startTime,
            endTIme: self.endTime
          },
          headers: {'X-Requested-With': 'XMLHttpRequest'},
          withCredentials: true
        }).then(res => {
          let data = res.data
          self.getDeviceInfo(data)
        })
        this.showDevices = true
      },
      closeDetails(){
        this.showData = false
      },
      closeDeviceDialog(){
        this.tableData = []
        this.showDevices = false
      },

      statistics(){
        let self = this
        self.tableData = []
        self.tableData_block = []
        // console.log(self.block+'//'+self.deviceType+self.startTime+self.endTime)
        Axios.get(this.api+'getECOfDevice',{
          params:{
            'blockId': self.block,
            'deviceTypeId': self.deviceType,
            'startTime': self.startTime,
            'endTime': self.endTime
          },
          headers: {'X-Requested-With': 'XMLHttpRequest'},
          withCredentials: true
        }).then(res => {
          let data = res.data
          if(self.block===''){
            let yTemp = ['日期']
            let xTemp = []
            data.DayECOfBlock.forEach(item => {
              let temp = {}
              temp['日期'] = item.createTime
              item.ECOfBlock.forEach(ec => {
                if(yTemp.indexOf(ec.blockName)===-1){
                  // console.log(yTemp.indexOf(ec.deviceTypeName)+ec.deviceTypeName)
                  yTemp.push(ec.blockName)
                }
                if (ec.electricConsume!==undefined){
                  temp[ec.blockName] = ec.electricConsume
                }
              })
              xTemp.push(temp)
            })
            self.chartData1 = {
              columns: yTemp,
              rows: xTemp
            }
            self.maxEc = res.data.total.maxEC
            self.minEc = res.data.total.minEC
            self.avgEc = res.data.total.avgEC

            data.totalECOfBlock.forEach(item => {
              self.tableData_block.push({blockId: item.blockId,blockName: item.blockName,deviceNum: item.deviceNum,Ec: item.EC})
            })
          } else {
            console.log('else')
            self.getDeviceInfo(data)
          }
        })
      },
      getDeviceInfo(data){
        let self = this
        let yTemp = ['日期']
        let xTemp = []
        data.DayECOfDeviceType.forEach(item => {
          let temp = {}
          temp['日期'] = item.createTime

          item.ECOfDeviceType.forEach(ec => {
            if(yTemp.indexOf(ec.deviceTypeName)===-1){
              // console.log(yTemp.indexOf(ec.deviceTypeName)+ec.deviceTypeName)
              yTemp.push(ec.deviceTypeName)
            }
            temp[ec.deviceTypeName] = ec.electricConsume

          })
          // console.log('-_-'+temp['日期']+'  '+temp['空调']+'  '+temp['灯光'])
          xTemp.push(temp)
        })
        self.chartData1 = {
          columns: yTemp,
          rows: xTemp
        }

        console.log(data)
        self.maxEc = data.total.maxEC
        self.minEc = data.total.minEC
        self.avgEc = data.total.avgEC
        data.device.forEach(item =>{
          // console.log(item.EC)
          let table = []
          item.ECOfDay.forEach(ec => {
            let date = ec.createTime.split(' ')[0].split('-')[1]+'-'+ec.createTime.split(' ')[0].split('-')[2]
            table.push({'日期':date,'能耗': ec.electricConsume})
          })
          self.tableData.push({
            name: item.deviceName,
            num: item.subEquipment,
            type: item.deviceTypeName,
            totalEc: item.EC,
            model: item.brandName+item.modelName,
            ip: item.ipAddress,
            port: item.port,
            id: item.deviceId,
            location: item.zoneName+item.buildingName+item.roomName,
            roomType: item.roomTypeName,
            dept: item.deptName,
            chartData: {
              columns: ['日期','能耗'],
              rows: table
            }
          })
        })
      }
    },
    watch:{
      chartType(newVal){
        this.chartSettings.type = newVal
      },
      showDialog(newVal){
        this.statistics()
      }
    }
  }
</script>

<style>
  .el-dialog {
    width: 800px;
  }
</style>
